import React from 'react'
import {Row,Col, Table, Input, Popconfirm,Button,  Dropdown,Icon ,Menu, Modal} from 'antd';
import {query} from '../../services/organization'
import Modals from './Modal'

class TableCustom extends React.Component {
  state = {
    data:[],
    selectedRow:'',
    modelVisible:false,
    rowData:[]
  }
  
  componentDidMount() {
    
  }
  
  handleClcik=(record, index, event)=>{
    if(this.props.onRowClcik)
      this.props.onRowClcik(record, index, event);
    this.setState({
      selectedRow:index
    })
  }
  rowClassName=(record, index,)=>{
    if(this.state.selectedRow === index){
      return 'rowSelected'
    }
    return '';
  }
  handleModelCancel = () => {
    this.setState({
      modelVisible: false,
    });
  }
  newMember = ()=>{
    this.setState({
      modelVisible:true,
      rowData:[],
      status:status?status:'create'
    })
  }
  update=(row,status)=>{
    this.setState({
      modelVisible:true,
      rowData:row,
      status:status?status:'create'
    })
  }

  delete = (row)=>{
    this.props.delete(row,this.props.parentId)
    console.log('delete',row)
    
  }

  componentWillReceiveProps(nextProps){
    if(this.props.data != nextProps.data){
      this.setState({
        modelVisible:false
      })
    }
  }
  render() {
  const columns = [...this.props.columns,
    { title: 'Action', dataIndex: '',width:'20%' , 
          render: (text, record) => {
            if(this.props.columns[0].tableName === 'user'){
              return (
                <div>
                  <a onClick={()=>this.delete(record)}>删除</a>
              </div>
              )
            }
            return (
                <div>
                  <a style={{marginRight:'10px'}} onClick={()=>this.update(record,'update')}>修改</a>
                  <a onClick={()=>this.delete(record)}>删除</a>
                </div>
              )
            
          }},
    ]
  return (
    
    <div>
      <div>
        <Table columns={columns} 
              onRowClick={this.handleClcik}
              rowClassName={this.rowClassName}
              rowKey={record => record.id}
              dataSource={this.props.data}
              pagination={false}
              loading={this.state.loading}
              onChange={this.handleTableChange} 
              bordered 
                 />
         <Button
          style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
          type="dashed"
          onClick={this.newMember}
          icon="plus"
        >
          新增
        </Button>
        <Modals 
          formArr={this.props.columns} 
          status={this.state.status}
          handleModelCancel={this.handleModelCancel.bind(this)}  
          rowData={this.state.rowData} 
          visible={this.state.modelVisible} 
          title={this.props.columns[0].title}
          save={this.props.save}
          parentId={this.props.parentId}
        />
      </div>

    </div>
  )
  }
}

export default TableCustom
